<template>
  <BackgroundBar class="barContent">
    <view v-if="leftContent === 'text'" class="leftText"> 海岛 </view>
    <BackArrow v-else-if="leftContent === 'icon'" class="backArrow" />
    <view class="search">
      <view class="searchIcon">
        <uv-icon size="30rpx" color="#999999" name="search" />
      </view>
      <view class="searchInput">
        <input
          :value="inputValue"
          :disabled="inputDisabled"
          placeholder="查找附近的珊瑚或鱼友"
          confirm-type="search"
          @click="inputClick"
          @input="inputChange"
          @confirm="inputConfirm"
        />
      </view>
    </view>
  </BackgroundBar>
</template>

<script setup>
import { ref } from "vue";
import BackgroundBar from "./background.vue";
import BackArrow from "./BackArrow.vue";

const props = defineProps({
  inputDisabled: {
    type: Boolean,
    default: true,
  },
  inputValue: {
    type: String,
    default: "",
  },
  leftContent: {
    type: String,
    default: "text", // icon
  },
});

const emit = defineEmits(["inputClick", "update:inputValue", "inputConfirm"]);

const inputDisabled = ref(props.inputDisabled);
const leftContent = ref(props.leftContent);

const inputClick = () => {
  emit("inputClick");
};

const inputChange = (e) => {
  emit("update:inputValue", e.target.value);
};

const inputConfirm = () => {
  emit("inputConfirm");
};
</script>

<style lang="scss">
.leftText {
  font-size: 32rpx;
  color: #ffffff;
  margin-right: 24rpx;
}

.backArrow {
  margin-right: 24rpx;
}

.search {
  width: 418rpx;
  height: 58rpx;
  background: #ffffff;
  opacity: 0.8;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  padding-left: 24rpx;
}

.searchIcon {
  padding-right: 12rpx;
  margin-right: 16rpx;
  border-right: 1px solid #999;
}

.searchInput {
  flex: 1;
  padding-top: 4rpx;

  input {
    width: 100%;
  }
}
</style>
